picture タグ
0個以上の <source> 要素と一つの <img> 要素を含み、様々な画面や端末の条件に応じた画像を提供
source タグ
と
srcset タグ
でで画面幅で出し分け
WebP
img タグ
に
alt 属性
や
Lazy load 遅延読み込み
など追加
高解像度の画像は、
img タグ
の
srcset タグ
に
このような違う内容の画像を表示することを
アートディレクション
と言うらしい
<picture>: 画像要素 - HTML: HyperText Markup Language | MDN
Picture element | Can I use... Support tables for HTML5, CSS3, etc
IE
以外対応済み
IE
には、
img タグ
を読み取ってもらう。
ポリフィル Polyfill
scottjehl/picturefill: A responsive image polyfill for <picture>, srcset, sizes, and more
疑問
? 縦横比を変える場合どうする？
source タグ
に追加でおｋ
source要素にwidth/height属性を指定して各画像のアスペクト比の維持とCLSの改善を図る | フロントエンドBlog | ミツエーリンクス
HTMLにimg要素で画像を表示する 2020年版 - Qiita
まとまってて良かった
なんでもかんでもpicture要素を使えばいいわけじゃない！レスポンシブ・イメージ実装の際の注意点 | Rriver
同じ内容で解像度変更するなら、non-pictureで、
img タグ
内で
srcset タグ
使うで十分みたい
pictureタグで画像をレスポンシブに切り替える - HTMLリファレンス
Ruby on Rails
で
source タグ
使いたい
railsでpictureタグによるwebp出し分けをする - Qiita]